<template>
  <div class="app-container">
    <el-form ref="formRef" :model="form" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="班组编号" prop="workGroup">
            {{ form.workGroup }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="班组名称" prop="workGroupName">
            {{ form.workGroupName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工厂" prop="factory">
            {{ form.factoryName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工段" prop="workshopCode">
            {{ form.workshopName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产线" prop="productLine">
            {{ form.productLineName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工艺段" prop="sectionCode">
            {{ form.sectionName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="班长" prop="monitorName">
            {{ form.monitorName }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="班组成员" name="first">
        <el-table :data="userList"  border>
          <!-- <el-table-column type="selection" width="55" align="center" /> -->

          <el-table-column
            label="姓名"
            align="center"
            prop="nickName"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="用户名"
            align="center"
            prop="userName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="手机号"
            align="center"
            prop="phonenumber"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="组织"
            align="center"
            key="deptName"
            prop="dept.deptName"
            :show-overflow-tooltip="true"
          />

          <!-- <el-table-column
          label="操作"
          align="center"
          width="160"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="handleUpdate(scope.row)"
              >编辑</el-button
            >
            <el-button
              link
              type="primary"
              icon="Delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
        </el-table></el-tab-pane
      >
    </el-tabs>
  </div>
</template>

<script setup name="Data">
import { useDict } from "@/utils/dict";
import { getShiftGroup } from "@/api/base/plan/shiftMgt/shiftGroup";
import { listUser } from "@/api/system/user";

import StoreBin from "../storehouseBin/index";
import { nextTick, reactive, useAttrs } from "vue";
const { proxy } = getCurrentInstance();
const showSearch = ref(true);

const attrs = useAttrs();
const emit = defineEmits(["close", "setTitle"]);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
  },
});
const userList = ref([]);
const activeName = ref("first");
const formRef = ref(null);
const { form, queryParams } = toRefs(data);

function getDetail(id) {
  reset();
  getShiftGroup(id).then((res) => {
    form.value = res.data;
    if (res.data.planGroupMemberList) {
      let userIdList = [];
      for (let i in res.data.planGroupMemberList) {
        if (
          res.data.planGroupMemberList[i].workStationStaff.split(",").length > 1
        ) {
          userIdList.push(
            ...res.data.planGroupMemberList[i].workStationStaff.split(",")
          );
        } else {
          userIdList.push(res.data.planGroupMemberList[i].workStationStaff);
        }
      }
      getList(userIdList);
    }
  });
}

function getList(userIdList) {
  listUser({ userIdList }).then((response) => {
    userList.value = response.rows;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

function handleClose() {
  emit("close");
}

/** 表单重置 */
function reset() {
  form.value = {
    name: undefined,
    type: undefined,
    equipNo: undefined,
    model: undefined,
    factory: undefined,
    segmentCode: undefined,
    workshopCode: undefined,
    status: undefined,
    remark: undefined,
  };
  formRef.value.resetFields();
}
onMounted(async () => {
  const { data } = attrs;
  getDetail(data.id);
});
</script>
